<template>
  <div class="dv-progress-bar" :class="{ 'is-dark': isDark }">
    <div class="progress-container">
      <!-- 标题 -->
      <div class="progress-header" v-if="title">
        <span class="progress-title">{{ title }}</span>
        <span class="progress-value" :style="{ color: barColor }">{{ displayValue }}</span>
      </div>
      
      <!-- 进度条背景 -->
      <div class="progress-track">
        <!-- 背景装饰 -->
        <div class="track-decoration">
          <svg width="100%" :height="height">
            <defs>
              <linearGradient :id="`grad-${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" :stop-color="barColor" stop-opacity="0.3" />
                <stop offset="100%" :stop-color="barColor" stop-opacity="0.1" />
              </linearGradient>
            </defs>
            <rect
              x="0"
              y="0"
              width="100%"
              :height="height"
              :fill="`url(#grad-${uid})`"
              rx="4"
            />
          </svg>
        </div>
        
        <!-- 进度条 -->
        <div 
          class="progress-bar" 
          :style="{ 
            width: `${currentProgress}%`,
            background: barGradient,
            height: `${height}px`
          }"
        >
          <!-- 流光效果 -->
          <div class="progress-shine" v-if="isDark"></div>
          
          <!-- 进度条装饰点 -->
          <div class="progress-dots">
            <span 
              v-for="i in 5" 
              :key="i" 
              class="dot"
              :style="{ left: `${i * 20}%` }"
            ></span>
          </div>
        </div>
        
        <!-- 边框 -->
        <div class="progress-border">
          <svg width="100%" :height="height + 4">
            <rect
              x="1"
              y="1"
              :width="`calc(100% - 2px)`"
              :height="height + 2"
              :stroke="barColor"
              stroke-width="2"
              fill="none"
              rx="4"
              opacity="0.5"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  value: number
  max?: number
  title?: string
  color?: string
  height?: number
  showValue?: boolean
  duration?: number
}

const props = withDefaults(defineProps<Props>(), {
  max: 100,
  height: 20,
  showValue: true,
  duration: 1000
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const currentProgress = ref(0)
const uid = ref(`progress-${Math.random().toString(36).substr(2, 9)}`)

const barColor = computed(() => {
  if (props.color) return props.color
  return isDark.value ? '#00d4ff' : '#409eff'
})

const barGradient = computed(() => {
  if (isDark.value) {
    return `linear-gradient(90deg, 
      ${barColor.value}80 0%, 
      ${barColor.value} 50%, 
      ${barColor.value}80 100%
    )`
  }
  return `linear-gradient(90deg, 
    ${barColor.value}dd 0%, 
    ${barColor.value} 100%
  )`
})

const displayValue = computed(() => {
  if (!props.showValue) return ''
  const percentage = (props.value / props.max * 100).toFixed(1)
  return `${percentage}%`
})

// 动画更新进度
const animateProgress = (target: number) => {
  const start = currentProgress.value
  const startTime = Date.now()
  
  const animate = () => {
    const now = Date.now()
    const progress = Math.min((now - startTime) / props.duration, 1)
    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
    
    currentProgress.value = start + (target - start) * easeOutQuart
    
    if (progress < 1) {
      requestAnimationFrame(animate)
    } else {
      currentProgress.value = target
    }
  }
  
  requestAnimationFrame(animate)
}

watch(() => props.value, (newVal) => {
  const percentage = (newVal / props.max) * 100
  animateProgress(Math.min(percentage, 100))
}, { immediate: true })
</script>

<style lang="scss" scoped>
.dv-progress-bar {
  width: 100%;
  
  .progress-container {
    width: 100%;
  }
  
  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    
    .progress-title {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
    
    .progress-value {
      font-size: 16px;
      font-weight: bold;
      font-family: 'DS-Digital', 'Courier New', monospace;
    }
  }
  
  .progress-track {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    
    .track-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    
    .progress-bar {
      position: relative;
      border-radius: 4px;
      transition: width 0.3s ease;
      z-index: 2;
      overflow: hidden;
      box-shadow: 0 0 10px currentColor;
      
      .progress-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(255, 255, 255, 0.3), 
          transparent
        );
        animation: shine 2s ease-in-out infinite;
      }
      
      .progress-dots {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        .dot {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 4px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          animation: dotBlink 2s ease-in-out infinite;
        }
      }
    }
    
    .progress-border {
      position: absolute;
      top: -2px;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
    }
  }
  
  &.is-dark {
    .progress-header {
      .progress-title {
        color: #a0cfff;
      }
      
      .progress-value {
        text-shadow: 0 0 10px currentColor;
      }
    }
    
    .progress-bar {
      box-shadow: 
        0 0 15px currentColor,
        inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes dotBlink {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
</style>
